<template>
    <div class="step-bar">
        <van-icon class="arrow-left" name="arrow-left" size="20px" @click="goBack" v-if="step != '4'"/>
        <p class="name">{{stepName}}</p>
    </div>
</template>

<script>
export default {
    props: ["step"],
    data() {
        return {
           stepName: ''
        }
    },
    created() {
       switch (this.step) {
            case '1': 
                this.stepName = '第一步'
                break
            case '2': 
                this.stepName = '第二步'
                break
            case '3': 
                this.stepName = '第三步'
                break
            case '4': 
                this.stepName = '查询结果'
                break
            case '5': 
                this.stepName = '在线客服'
            break
       }
    },
    methods: {
        goBack() {
             this.$router.direction = 'right'
            switch (this.step) {
                case '1': 
                    this.goTo('stepOne')
                    break
                case '2': 
                    this.goTo('stepTwo')
                    break
                case '3': 
                    this.goTo('stepThree')
                    break
                case '5': 
                    this.goTo('stepFive')
                break
            }
        }
    },
}
</script>

<style lang="less" scoped>
.step-bar {
    width: 100%;
    height: 90px;
    font-size: 30px;
    color: #fff;
    background-color: #6c52fb;
    text-align: center;
    position: fixed;
    top: 0;
    line-height: 90px;
    z-index: 999;
    .arrow-left {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>

